<template>
    <div class="box">
        <!--  mode="out-in" 设置过渡模式 -->
        <Transition mode="out-in">
            <!-- 登录盒子 -->
            <el-card v-if="isLogin">
                <h1>欢迎登录</h1>
                <!-- 登录表单 -->
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="ruleForm.username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            登录
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-link type="danger" @click="isLogin = false">还没有账号，去注册</el-link>
            </el-card>
            <!-- 注册盒子 -->
            <el-card v-else>
                <h1>欢迎注册</h1>
                <!-- 注册表单 -->
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="ruleForm.username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm2(ruleFormRef)">
                            注册
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-link type="success" @click="isLogin = true">已有账号，去登录</el-link>
            </el-card>
        </Transition>
    </div>
</template>

<script setup>
import { ref } from 'vue'
// 定义一个变量，结合 v-if 和 v-else 实现登录、注册盒子的显示和隐藏
let isLogin = ref(true)
// 表单校验
const ruleFormRef = ref()
// 表单数据对象：和表单双向绑定的数据
const ruleForm = ref({
    username: '',
    password: ''
})
// 表单验证规则
const rules = ref({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 4, max: 8, message: '长度必须为4-8位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 4, max: 8, message: '长度必须为4-8位', trigger: 'blur' },
    ],
})

// 导入登录、注册API
import { loginAPI, registerAPI } from '@/api/login'
// 导入ElMessage组件
import { ElMessage } from 'element-plus'
// 从vue-router中导入useRouter函数
import { useRouter } from 'vue-router'
const router = useRouter()
// 登录方法
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // 表单验证通过
            let res = await loginAPI(ruleForm.value)
            // 如果返回值中有token，则证明登录成功了
            if (res.data.data) {
                // 提示信息
                ElMessage.success(res.data.msg)
                // 将token保存到本地存储空间
                localStorage.setItem('token', res.data.data)
                // 跳转到首页
                router.push('/index')
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            // 表单验证失败
            console.log('error submit!', fields)
        }
    })
}
// 注册方法
const submitForm2 = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // 表单验证通过
            let res = await registerAPI(ruleForm.value)
            // 如果返回值中的提示信息是 "注册成功"，证明注册成功了
            if (res.data.msg === '注册成功') {
                // 提示信息
                ElMessage.success(res.data.msg)
                // 切换到登录界面
                isLogin.value = true
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            // 表单验证失败
            console.log('error submit!', fields)
        }
    })
}
// 重置方法
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.box {
    width: 480px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 进入之前，离开之后 */
.v-enter-from,
.v-leave-to {
    opacity: 0;
}

/* 进入之后，离开之前 */
.v-enter-to,
.v-leave-from {
    opacity: 1;
}

/* 进入时 */
.v-enter-active {
    transition: opacity 0.5s ease;
    animation: toLeft 0.5s ease forwards;
}

/* 离开时 */
.v-leave-active {
    transition: opacity 0.5s ease;
    animation: toRight 0.5s ease forwards;
}

/* 进入时的动画：向左进入 */
@keyframes toLeft {
    0% {
        transform: translateX(200px);
    }

    100% {
        transform: translateX(0);
    }
}

/* 离开时的动画：向右离开 */
@keyframes toRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200px);
    }
}
</style>